* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    background: transparent;
    scrollbar-face-color: #d7d7d7;
    scrollbar-highlight-color: #d7d7d7;
    scrollbar-shadow-color: #d7d7d7;
    scrollbar-3dlight-color: #d7d7d7;
    scrollbar-arrow-color: #000000;
    scrollbar-track-color: #bbbbbb;
    scrollbar-darkshadow-color: #bbbbbb;
}

body, html {
    overflow: hidden;
}

iframe {
    display: block;
    width: 100%;
    border: none
}

ol, ul, li {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
}

:focus {
    outline: 0;
}

ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

a img, img {
    border: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    text-align: left;
    padding: 0;
    margin: 0;
}

a, p a, p, tr, td, th, table, label, div, li, b {
    font-size: 12px;
}

a, p a, p, tr, td, th, table, label, br, li, b {
    line-height: 18px;
}

a {
    text-decoration: none;
}

a:hover {
    color: #000;
    cursor: pointer;
}

.clear {
    clear: both;
    height: 0;
}

html {
    height: 100%;
}

body {
    background: url("../../images/body-bg.png") 0px 0px repeat transparent;
    text-align: left;
    font: normal 70% Arial, Helvetica, sans-serif;
    line-height: 18px;
    height: 100%;
}

/*------------West - Left-----------*/
.apps_viewer .ui-layout-west {
    overflow: auto;
}

.apps_viewer #LEFT {
    background: #fff;
    margin: 8px 5px 5px 10px;
    padding: 10px;
    border-radius: 5px;
    border: none;
    position: relative;
    height: calc(100% - 40px);
    overflow: auto;
}

/*------------West - Right-----------*/
.apps_viewer .ui-layout-east {

}

.apps_viewer #RIGHT {
    height: calc(100% - 20px);
    margin: 0 5px 0 0px;
    padding: 10px;
    box-shadow: rgba(36, 143, 170, 0.3) 0px 0px 10px;
}

/*------------Center - Center-----------*/

.apps_viewer .ui-layout-center {
    height: calc(100% - 100px);
    width: calc(50% - 20px);
    padding: 10px;
    float: left;
}

.apps_viewer #CENTER {
    height: 100%;
    width: 100%;
}

.apps_viewer #CENTER iframe {
    width: 100%;
    height: 100%;
    display: block;
}

#image li a {
    padding: 2px 5px 2px 5px;
}

/*---------Form-----------*/

form {
    width: 90%;
    margin: 0 auto;
    border: 1px solid #9CD6E7;
    border-radius: 5px;
    background-color: #AADCEA;
    box-shadow: rgba(170, 220, 234, 1) 0px 0px 100px;
    padding-bottom: 50px;
}

.tab-frame ul {
    margin: 0 auto;
    padding: 30px 30px 20px;
    text-align: center;
}

.tab-frame ul li {
    margin-bottom: 10px;
    position: relative;
}

.tab-frame label {
    width: 25%;
    display: inline-block;
    text-align: left;
    vertical-align: top;
}

.tab-frame label, .tab-frame p {
    color: #1C6071;
}

.tab-frame  a#submit {
    margin-top: 20px;
}

table {
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    border-collapse: collapse;
    border-spacing: 0;
}

table th, table td {
    padding: 0;
    font-size: 11px;
}

/*---------INPUT - Text-----------*/
input[type = "text"], select, textarea {
    border: 1px solid #9CD6E7;
    background-color: #FFFFFF;
    border-radius: 3px;
    padding: 0 7px;
    height: 18px;
    box-shadow: rgba(36, 143, 170, 0.3) 0px 8px 15px inset;
    color: #000000;
    position: relative;
    display: inline-block;
    width: 35%;
}


.input-hidden {
    width: 30%;
    padding: 0 7px;
    display: inline-block;
}

select {
    padding-right: 0px;
    width: calc(30% + 17px);
}

input[type = "text"]:before {
    content: "";
    width: 100%;
    height: 100%;
    box-shadow: rgba(11, 44, 51, 0.2) 0px 10px 15px;
    position: absolute;
}

input[value = "Add"] {
    position: absolute;
    border: 1px solid #B0E0EC;
    border-collapse: collapse;
    display: inline-block;
    color: #1C6071;
    background-color: #ffffff;
    padding: 3px 6px;
    margin-left: 5px;
}

.bi_ct {
    width: calc(30% + 16px);
    display: inline-block;
    text-align: left;
}

.bi_ct input[type="text"] {
    width: calc(100% - 16px);
    margin-bottom: 5px;
}

.bi_ct select {
    width: 100%;
}

/*---------INPUT - Text-----------*/

textarea {
    padding: 7px;
    overflow: auto;
}

textarea, select[multiple] {
    height: 100px;
}

/*--------- DIV Styles-----------*/
.container {
    position: relative;
    z-index: 1;
    width: 600px;
    padding: 20px;
    margin: 0 auto;
    background: #FAF0D9;
}

.container:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    font-size: 0;
}

/* Shared styles */

.drop-shadow {
    position: relative;
    float: left;
    width: 92%;
    height: 100%;
    padding: 8px 10px 2px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.drop-shadow:before,
.drop-shadow:after {
    content: "";
    position: absolute;
    z-index: -2;
}

.drop-shadow p {
    font-size: 16px;
    font-weight: bold;
}

/* Lifted corners */

.lifted {
    border-radius: 4px;
}

.lifted:before,
.lifted:after {
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
    max-width: 300px;
    max-height: 100px;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.lifted:after {
    right: 10px;
    left: auto;
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
}

/* Curled corners */

.curled {
    border: 1px solid #efefef;
    border-radius: 0 0 120px 120px / 0 0 6px 6px;
}

.curled:before,
.curled:after {
    bottom: 12px;
    left: 10px;
    width: 50%;
    height: 55%;
    max-width: 200px;
    max-height: 100px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
    -ms-transform: skew(-8deg) rotate(-3deg);
    transform: skew(-8deg) rotate(-3deg);
}

.curled:after {
    right: 10px;
    left: auto;
    -ms-transform: skew(8deg) rotate(3deg);
    transform: skew(8deg) rotate(3deg);
}

/* Perspective */

.perspective:before {
    left: 80px;
    bottom: 5px;
    width: 50%;
    height: 35%;
    max-width: 200px;
    max-height: 50px;
    box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);
    -ms-transform: skew(50deg);
    transform: skew(50deg);
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

.perspective:after {
    display: none;
}

/* Raised shadow - no pseudo-elements needed */

.raised {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    width: 100%;
    height: 100%;
}

/* Curved shadows */

.curved:before {
    top: 10px;
    bottom: 10px;
    left: 0;
    right: 50%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    border-radius: 10px / 100px;
}

.curved-vt-2:before {
    right: 0;
}

.curved-hz-1:before {
    top: 50%;
    left: 10px;
    right: 10px;
    border-radius: 100px / 10px;
}

.curved-hz-2:before {
    left: 10px;
    right: 10px;
    border-radius: 100px / 10px;
}

/* Rotated box */

.rotated {
    box-shadow: none;
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.rotated > :first-child:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

/*
.icon-swap {
    margin: 0 auto;
    border-radius: 1px;
    width: 22px;
    height: 22px;
    padding: 0;
    position: relative;
    overflow: hidden;
    -ms-transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
    transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
    -ms-transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
    transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
}

.icon-swap:hover {
    box-shadow: 0 0 5px 5px #FFFFCC;
}
*/

/* ============ Component - Banner ============= */

.comp-banner .header {
    background-image: url('../../images/topheader-bg.png') ;
    background-repeat: repeat;
    margin: 0 auto;
    position: relative;
    box-shadow: rgba(0, 78, 129, 0.4) 0px 3px 12px;
}

.comp-banner .header .welcome {
    position: absolute;
    right: 250px;
    top: 0px;
    text-transform: uppercase;
    background: url('../../images/bg-welcome_appsview-M.png') repeat left 0px;
    height: 28px;
}

.comp-banner .header .welcome:before {
    content: "";
    width: 38px;
    position: absolute;
    left: -38px;
    top: 0;
    background: url('../../images/bg-welcome_appsview-LR.png') repeat left 0px;
    height: 28px;
}

.comp-banner .header .welcome:after {
    content: "";
    width: 38px;
    position: absolute;
    right: -38px;
    top: 0;
    background: url('../../images/bg-welcome_appsview-LR.png') repeat left -30px;
    height: 28px;
}

.comp-banner .header .welcome p {
    color: #000000;
    font-size: 11px;
    text-transform: capitalize;
    padding-top: 2px;
}

.comp-banner .header .welcome p span {
    color: #0099D6;
}

.comp-banner h1.title {
    line-height: 45px;
    color: #FFFFFF;
    font-size: 17px;
    padding-left: 15px;
    font-weight: bold;
    background: url('../../images/icon/MISBanner.png');
}

.comp-banner .aramco-logo {
    top: 4px;
    right: 10px;
    position: absolute;
}

/*-----------
        BI APP Report View
                    -----------------*/

#frame_id {
    background: #c1c1c1;
}

.kpi_view {
    height: 100%;
}

.kpi_view {
    position: relative;
}

.kpi_view table {
    padding-bottom: 10px;
}

.kpi-cover {
    width: 100%;
    margin: 0;
    height: calc(100% - 32px);
    position: relative;
}

.kpi-panel {
    border: 1px solid #ccc;
    width: auto;
    height: 100% !important;
    overflow-y: hidden;
}

.kpi-list-item-hide {
    display: none;
    padding: 1px;
    list-style-type: none;
    float: left;
    min-width: 400px;
    height: 370px;
}

.kpi-list-item-show {
    display: block;
    overflow: hidden;
    float: left;
    margin: 4px;
    width: 400px;
    height: 370px;
    border-radius: 5px;
    border: 1px solid #999;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.kpi-container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 99%;
    overflow: auto;
    float: left;
}

#chart_placeholder,
#table_placeholder {
    height: 100%;
    background: #fff;
}

.loading {
    background: transparent url("../../images/loading.gif") center center no-repeat;
}

.maximize-toolbar {
    width: calc(100% - 10px);
    position: absolute;
    top: 0;
    left: 0;
    padding: 3px 5px;
    height: 26px;
    z-index: 350;
    background: #3F3F3F url('../../images/panel_bar_bg.png') 0 0 repeat-x;
    display: block;
    border: 1px solid #999;
    border-bottom: none;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
.maximize-toolbar .clear, .toolbar .clear {
    font: normal 13px/26px Arial;
    color: #fff;
}
div.maximize {
    width: 100%;
    height: calc(100% - 32px);
    background: #fff;
    z-index: 10;
    position: absolute;
    top: 32px;
    left: 0px;
    border: 1px solid #999;
    border-top: none;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}

.drilldown-container {
    width: 100%;
    height: 100%;
    position: absolute;
}

.toolbar {
    display: block;
    background: #3F3F3F url('../../images/panel_bar_bg.png') 0 0 repeat-x;
    height: 26px;
    position: relative;
    padding: 3px 5px;
    margin: 0;
    z-index: 1;
}

.toolbar:before, .maximize-toolbar:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-width: thick;
    position: absolute;
    bottom: 0;
}

.toolbar ul, .maximize-toolbar ul {
    float: right;
    z-index: 2;
    position: relative;
}

.toolbar ul li, .maximize-toolbar ul li {
    float: left;
    padding: 2px 0px;
    margin: 0 2px;
}

.toolbar ul li a, .maximize-toolbar ul li a {
    width: 15px;
    height: 14px;
}

.toolbar ul li a img:hover {
    /*box-shadow: 0 0 5px rgba(0,0,0,0.5);*/
    box-shadow: 0 0 5px 2px #FFFFCC;
    border: none;
    border-radius: 2px;
}
/*
.toolbar ul li a.tabular, .maximize-toolbar ul li a.tabular {
    background-position: 0px 0px;
}

.toolbar ul li a.tabular:hover, .maximize-toolbar ul li a.tabular:hover {
    background-position: 0px -15px;
}

.toolbar ul li a.url, .maximize-toolbar ul li a.url {
    background-position: -15px 0px;
}

.toolbar ul li a.url:hover, .maximize-toolbar ul li a.url:hover {
    background-position: -15px -15px;
}

.toolbar ul li a.print, .maximize-toolbar ul li a.print {
    background-position: -30px 0px;
}

.toolbar ul li a.print:hover, .maximize-toolbar ul li a.print:hover {
    background-position: -30px -15px;
}

.toolbar ul li a.minimize, .maximize-toolbar ul li a.minimize {
    background-position: -45px 0px;
}

.toolbar ul li a.minimize:hover, .maximize-toolbar ul li a.minimize:hover {
    background-position: -45px -15px;
}

.toolbar ul li a.maximize, .maximize-toolbar ul li a.maximize {
    background-position: -60px 0px;
}

.toolbar ul li a.maximize:hover, .maximize-toolbar ul li a.maximize:hover {
    background-position: -60px -15px;
}
*/
/*-----------Content------------*/
.content {
    position: relative;
    margin: 8px;
    padding: 10px;
    border-radius: 5px;;
    border: 1px solid #6c6f70;
    background: #FFFFFF;
    box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.4);
    height: 100%;
    height: calc(100% - 20px);
}

.content iframe {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

/*=============APPS Viewer===============*/
.apps_viewer {
    height: 100%;
}

.wrapper {
    height: 100%;
    position: relative;
    opacity: 0;
}

/*-----------Tab Content---------*/
.tabs {
    height: 100%;
}

.tabs .tab-content {
    height: 100%;
    background: rgb(203, 219, 234);
    border-radius: 5px;
}

.tab-content object {
    width: calc(100% - 1px);
    height: calc(100% - 1px);
}

.tab-content-inner {
    height: 100%;
    background: #fff;
    border: none;
    border-radius: 5px;
}

.tabs ul.tab-title {
    overflow: hidden;
    margin-top: 10px;
    margin-left: 15px;
    height: 23px;
    width: calc(100% - 40px);
}

.tabs ul.tab-title li {
    float: left;
    position: relative;
}
.tabs ul.tab-title li.ui-tabs-paging-prev a, .tabs ul.tab-title li.ui-tabs-paging-next a {
    width: 24px;
    height: 23px;
    padding: 0;
    background: url(../../images/tab-arrows.png) 0 0 no-repeat transparent;
    margin: 0 5px;
    text-indent: -99999px;
}
.tabs ul.tab-title li.ui-tabs-paging-next a {
    background-position: -24px 0;
}
.tabs ul.tab-title li.ui-tabs-paging-prev a:hover, .tabs ul.tab-title li.ui-tabs-paging-next a:hover {
    background-position-y: -25px;
}
.tabs ul.tab-title li.ui-tabs-paging-next select {
    width: 15px;
    border: none;
    padding: 0;
    height: 20px;
}
.tabs ul.tab-title li a {
    background: url(../../images/tab_title-R.png) right top no-repeat transparent;
    display: inline-block;
    padding-right: 30px;
    height: 23px;
    color: #E3F4F9;
}

.tabs ul.tab-title li a span {
    background: url(../../images/tab_title-L.png) 0 0 no-repeat transparent;
    color: #000000;
    line-height: 23px;
    padding: 2px 5px 2px 10px;
    display: inline-block;
}

.tabs ul.tab-title li.ui-tabs-active a {
    background-position-y: -27px;
}

.tabs ul.tab-title li.ui-tabs-active a span {
    background-position-y: -27px;
    line-height: 23px;
    display: inline-block;
}

.tabs .ui-icon-close {
    background: url('../../images/tab-close.png') 0 0 no-repeat;
    position: absolute;
    top: 6px;
    right: 18px;
    cursor: pointer;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 5px;
    text-indent: -9999px;
}

.tabs li.ui-tabs-active .ui-icon-close {
    background-position: 0 0;
}

.tabs .ui-icon-close:hover, .tabs li.ui-tabs-active .ui-icon-close:hover {
    background-position: 0 -12px;
}
.ui-menu {
    position: absolute;
    width: 100px;
}
.ui-tabs-paging-disabled {
    visibility: hidden;
}

/*------- Top Links [ Fav, Var] ------*/
.top-links {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 1;
}

.top-links ul li {
    margin-top: 0;
    float: left;
}

.top-links ul li a span {
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 3px;
    display: block;
    background: url(../../images/icon-topcontent.png) 0 0 no-repeat transparent;
}
.top-links ul li a span.ui-button-text {
    display: none;
}

.top-links ul li a.icon-favourites span {
    background-position: -26px 0;
}

.top-links ul li a.icon-favourites:hover span {
    background-position: -26px -25px;
}

.top-links ul li a {
    font: normal 12px/20px arial;
    color: #ccc;
}

.top-links ul li a:hover {
    color: rgb(255, 137, 1);
}

.top-links a.icon-varscreen:hover span, .top-links a.icon-varscreen-active span {
    background-position: 0 -22px;
}

.top-links a.icon-favourites {
    background-position: -27px 1px;
}

.top-links a.icon-favourites:hover {
    background-position: -27px -24px;
}

/*----- Dialog BOx ------*/

.ui-dialog {
    width: 285px;
}

.ui-dialog-content {
    height: 250px;
}

.noTitleDialog .ui-dialog-titlebar {
    display: none
}

.ui-dialog .ui-dialog-content {
    background-color: #666666;
}

.noTitleDialog .ui-dialog-content {
    overflow: hidden;
    margin: 5px;
    padding: 0px;
    background: #fff;

}

.ui-layout-center ui-layout-pane ui-layout-pane-center ui-layout-pane-hover
     ui-layout-pane-center-hover ui-layout-pane-open-hover
     ui-layout-pane-center-open-hover {
    width: 200px;
}

.ui-dialog.ui-widget-content {
    background: #fff;
}

#dlg_iframe {
    width: 500px;
}

#dialog iframe {
    width: 98%;
    height: 100%;
    border: 0;
}

/*-----------
        BI APP Variable Screen
            -----------------*/
.varscreen {
    width: 99%;
    height: 90%;
    background: #fff;
    /*box-shadow: rgba(36, 143, 170, 0.7) 0px 0px 10px;*/
    margin: 10px 0 0 10px;
    border: none;
    overflow-y: scroll;
    border-radius: 5px;
}

.varscreen-title {
    top: 21px;
    left: 30px;
    position: absolute;
    width: auto;
    z-index: 1;
    font-size: 13px;
    display: none;
    height: 22px;
    line-height: 22px;
    padding: 0 20px 0 10px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border: none;
    background-color: #95D0E2;
    margin-bottom: -1px;
    color: #d9e3ea;
}

.varscreen h2.varscreen_title {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    border-radius: 3px 3px 0 0;
    background-color: #2DAFD0;
    box-shadow: rgba(45, 175, 208, 0.1) 0px 10px 75px;
    color: #257992;
    padding-left: 20px;
}

.varscreen iframe {
    height: 100%;
    width: 100%;
    min-height: 220px;
    display: block;
}

.varscreen-container {
    width: calc(100% - 20px);
    height: calc(100% - 45px);
    margin: 0 10px;
    position: absolute;
    top: 35px;
    border-radius: 5px;
    display: none;
    background: #fff;
}

.varscreen-container iframe {
    height: 100%;
}

.varscreen p {
    color: #ffffff;
}

.varscreen #var_screen {
    height: calc(100% - 50px);
}

.varscreen iframe {
    width: 100%;
    height: 100%;
}

.varscreen *[LOC] {
    border: 1px solid #ccc;
    background: #d4d4d4;
    border-radius: 3px;
    overflow: hidden;
}

.variable-search {
    width: calc(100% - 20px);
    padding: 5px 10px;
    position: relative;
    display: inline-block;
}

input[type = "text"].search-box {
    background: #fff;
    border: 1px solid #ccc;
    padding: 2px 5px;
    border-radius: 5px;
    float: left;
    width: 60%;
}
input[type = "text"].org-input {
    width:54.5%
}

input[type = "text"].disabled-text {
    color: #A0A0A0;
}

/* new clas added for SearchText*/
.multiple .variable-selected {
    background: #eee;
    position: absolute;
    top: 35px;
    right: 18px;
    min-width: 150px;
}

.multiple .variable-selected ul li {
    border-bottom: 1px solid #ccc;
    padding: 5px 10px;
}

.multiple .variable-selected ul li:last-child {
    border: none;
}

.sel-list-item {
    padding: 0;
    font-size: 11px;
    color: #666;
}

.selected-close {
    float: right;
    background: #eee url("../../images/icon/close_x1.png") 8px 8px no-repeat;
    width: 18px;
    height: 18px;
    padding: 5px;
    margin-top: -26px;
    border-radius: 5px;
}

.selected-close:hover {
    cursor: pointer;
}

.del-item {
    float: right;
    width: 18px;
    height: 18px;
    background: url("../../images/icon/close_3.png") 1px 1px no-repeat;
}
.del-item:hover {
    cursor: pointer;
    filter:alpha(opacity=70);
}
.hidden-class {
    display: none;
}

.show-class {
    display: block;
}

.show-inline-class {
    display: inline-block;
}

.variable-header {
    position: relative;
}

.header-label .down-arrow {
    background: url("../../images/down-arrow.png") -7px right no-repeat;
    padding-right: 10px;
}

.header-label {
    color: #666;
    float: left;
    line-height: 24px;
    margin-left: 10px;
}

.header-label:hover {
    color: #333;
}

.searchBtn {
    height: 25px;
    width: 25px;
    background: #124E67 url("../../images/srch_icon.png") 4px 4px no-repeat;
    float: left;
    text-indent: -9999px;
}

.searchBtn:hover {
    cursor: pointer;
    filter: alpha(opacity = 70);
}

button#clear {
    padding: 2px 10px;
    float: left;
    margin-left: 192px;
    background: #666;
    color: #fff;
}

#chk_search label {
    float: left;
    margin-right: 5px;
    line-height: 24px;
}

.controls a {
    display: block;
    float: left;
}

.controls a:hover {
    color: #043A4F;
    cursor: pointer;
    background-color: #FFFFFF;
}

.controls a.reset {
    margin-right: 0px;
}

.controls ul {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 0;
}

.controls ul li {
    display: inline-block;
    margin: 0 5px;
    padding: 5px 0;
}

.biapp-var-screen {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.droplist-body {
    background: rgb(227, 227, 227);
}

.title {
    background: rgb(215, 239, 246);
    padding: 5px;
}

.title h2 {
    color: #222;
    text-align: left;
    font-size: 15px;
    font-weight: normal;
}

.floatLeft {
    float: left;
}

.sapUiSearchField {
    width: 280px;
}

.var_content {
    padding: 10px;
}

/*---- Layout Preview ----*/

.one-col, .two-col, .three-col {
    width: 98.5%;
    height: 40%;
    min-height: 220px;
    float: left;
    margin: 2px;
    background: #EFFCFF;
}

.one-col iframe body, .two-col iframe body, .three-col iframe body {
    background: #EFFCFF;
}

.two-col {
    width: 49%;
}

.three-col {
    width: 32.5%;
}

.left-col {
    width: 24%;
    height: 100%;
    float: left;
}

.right-col {
    width: 75.5%;
    height: 100%;
    float: left;
}

.two-row {
    height: 50%;
    min-height: 109px;
}

/*---- Multi Selection ----*/

.multiple h3 {
    font-size: 14px;
    text-align: center;
    height: 30px;
    text-transform: capitalize;
    background: #cbe4eb;
    z-index: 10;
}

.multiple .variable-inner {

}

.multiple .variable-inner ul li p {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 5px 10px;
}

.multiple .variable-inner .ui-selecting {
    background-color: #004B62;
    color: #FFFFFF;
}

.multiple .variable-inner .ui-selected p {
    background-color: #002935;
    color: #FFFFFF;
}

.multiple .variable-inner .ui-selectable-helper {
    display: none;
}

.pagination {
    background: #e1e1e1;
    padding: 0 10px;
    height: 18px;
}

.pagination a {
    font-size: 11px;
    text-decoration: none;
    color: #333;
}

.pagination ul li {
    float: left;
    margin-right: 5px;
}

/*------- Top Banner Menu -------------*/

#menu li ul li:hover {
    border: none;
    background: none;
}
/*------- Org Menu -------------*/

.org-menu {
    width: 100%;
    height: 100%;
}

.org-menu .hierarchy {
    float: left;
    width: 100%;
    text-align: left;
}

.org-menu .org-search {
    color: #124E67;
    min-height: 24px;
    padding: 5px 10px;
    background: none;
}

.org-menu .org-search input {
    border-color: #ccc;
    color: #333;
    border-radius: 3px;
}

.org-search label {
    float: left;
    line-height: 24px;
    padding-right: 3px;
    color: #333;
}

ul.dynatree-container a {
    border: none;
}

.ui-accordion-content {
    height: 100%;
}

select#period {
    width: 100%;
    height: 24px;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 2px;
}

#periodLabel {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
}

#rep_load {
    display: inline-block;
    padding: 0;
    margin: 3px 0 0 5px;
    width: 24px;
    height: 24px;
}

input#period {
    width: 100%;
}

/*---------- Date/Calander ---------*/

.dpOuter {
    width: 99%;
    height: 95%;
    height: calc(100% - 10px);
    background: #fff;
    margin-left: 4px;
}

.dpOuter .closeDate {
    cursor: pointer;
    float: right;
    margin: 5px;
}

.date-wraper {
    background: #fff;
}

.date-wraper .variable-inner {
    padding: 5px 10px;
}

.date-picker p {
    padding: 8px 0;
}

.date-picker label {
    min-width: 100px;
    display: inline-block;
}

.date-picker input {
    background: #fff;
    font-size: 12px;
    border: 1px solid #ccc;
    padding: 3px 5px;
}

/*
*	PANES & CONTENT-DIVs
*/
.ui-layout-pane {
    /* all 'panes' */
    background-color: transparent !important;
    border: 0 !important;

    padding: 0px !important;

    overflow: hidden;
/ / ansaj change "auto to hidden" for hiding the scroll
    /* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
	   otherwise you may get double-scrollbars - on the pane AND on the content-div
	   - use ui-layout-wrapper class if pane has a content-div
	   - use ui-layout-container if pane has an inner-layout
	*/
}

/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
.ui-layout-content {
    padding: 10px;
    position: relative; /* contain floated or positioned elements */
    overflow: auto; /* add scrolling to content-div */
}

/*
 *	UTILITY CLASSES
 *	Must come AFTER pane-class above so will override
 *	These classes are NOT auto-generated and are NOT used by Layout
 */
.layout-child-container,
.layout-content-container {
    padding: 0;
    overflow: hidden;
}

.layout-child-container {
    border: 0; /* remove border because inner-layout-panes probably have borders */
}

.layout-scroll {
    overflow: auto;
}

.layout-hide {
    display: none;
}

/*
 *	RESIZER-BARS
 */
.ui-layout-resizer {
    /* all 'resizer-bars' */
    background-color: transparent !important;
    border: 0 !important;
    border-width: 0;
}

.ui-layout-resizer-drag {
    /* REAL resizer while resize in progress */
}

.ui-layout-resizer-hover {
    /* affects both open and closed states */
}

/* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
        otherwise color shifts while dragging when bar can't keep up with mouse */
.ui-layout-resizer-open-hover, /* hover-color to 'resize' */
.ui-layout-resizer-dragging {
    /* resizer beging 'dragging' */
    background: #C4E1A4;

}

.ui-layout-resizer-dragging {
    /* CLONED resizer being dragged */

    background: rgba(255, 255, 255, 0.35) !important;
}

.ui-layout-resizer-north-dragging,
.ui-layout-resizer-south-dragging {
    border-width: 0px 0;
}

.ui-layout-resizer-west-dragging,
.ui-layout-resizer-east-dragging {
    border-width: 0 0px;
}

/* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
.ui-layout-resizer-dragging-limit {
    /* CLONED resizer at min or max size-limit */
    background: #E1A4A4; /* red */
}

.ui-layout-resizer-closed-hover {
    /* hover-color to 'slide open' */
    background: #EBD5AA;
}

.ui-layout-resizer-sliding {
    /* resizer when pane is 'slid open' */
    opacity: .10; /* show only a slight shadow */
    filter: alpha(opacity = 10);
}

.ui-layout-resizer-sliding-hover {
    /* sliding resizer - hover */
    opacity: 1.00; /* on-hover, show the resizer-bar normally */
    filter: alpha(opacity = 100);
}

/* sliding resizer - add 'outside-border' to resizer on-hover
         * this sample illustrates how to target specific panes and states */
.ui-layout-resizer-north-sliding-hover {
    border-bottom-width: 0px;
}

.ui-layout-resizer-south-sliding-hover {
    border-top-width: 0px;
}

.ui-layout-resizer-west-sliding-hover {
    border-right-width: 0px;
}

.ui-layout-resizer-east-sliding-hover {
    border-left-width: 0px;
}

/*
 *	TOGGLER-BUTTONS
 */
.ui-layout-toggler {
    border: 0 !important; /* match pane-border */
    background-color: #fc7d2f !important;
    opacity: .50;
    filter: alpha(opacity = 50);
}

.ui-layout-resizer-hover .ui-layout-toggler {
    opacity: .60;
    filter: alpha(opacity = 60);
}

.ui-layout-toggler-hover, /* need when NOT resizable */
.ui-layout-resizer-hover .ui-layout-toggler-hover {
    /* need specificity when IS resizable */
    background-color: #FC6;
}

.ui-layout-toggler-west {
    border-width: 0px 0; /* top/bottom borders */
    position: absolute;
    /* top: 0px !important; */
    width: 9px !important; /*actula value= 10px*/
    height: 80px !important; /*actula value= 10px*/
    background: url('../images/open_close_west.png') 0px 0px no-repeat !important;
    display1: block;
    /*image for resizing the west and //north */
}

.ui-layout-toggler-west:hover {
    background-position: -9px 0px !important;
}

.ui-layout-toggler-north {
    border-width: 0px 0; /* top/bottom borders */
    position: absolute;
    /* top: 0px !important; */
    width: 80px !important; /*actula value= 10px*/
    height: 9px !important; /*actula value= 10px*/
    background: url('../images/open_close_north.png') 0px 0px no-repeat !important;
    display1: block;
    /*image for resizing the west and //north */
}

.ui-layout-toggler-north:hover {
    background-position: -80px 2px !important;
}

.ui-layout-resizer-north {
    height: 9px !important;
    top: -9px;
}

/* hide the toggler-button when the pane is 'slid open' */
.ui-layout-resizer-sliding .ui-layout-toggler {
    display: none;

}

/*
     *	style the text we put INSIDE the togglers
     */
.ui-layout-toggler .content {
    color: #666;
    font-size: 12px;
    font-weight: bold;
    width: 100%;
    padding-bottom1: 0.35ex; /* to 'vertically center' text inside text-span */
}

/*
 *	PANE-MASKS
 *	these styles are hard-coded on mask elems, but are also
 *	included here as !important to ensure will overrides any generic styles
 */
.ui-layout-mask {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    opacity: 0 !important;
    filter: Alpha(Opacity = "0") !important;
}

.ui-layout-mask-inside-pane {
    /* masks always inside pane EXCEPT when pane is an iframe */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

div.ui-layout-mask {
}

/* standard mask for iframes */
iframe.ui-layout-mask {
}

/* extra mask for objects/applets */

/*
 *	Default printing styles
 */
@media print {
    /*
	 *	Unless you want to print the layout as it appears onscreen,
	 *	these html/body styles are needed to allow the content to 'flow'
	 */
    html {
        height: auto !important;
        overflow: visible !important;
    }

    body.ui-layout-container {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        /* only IE6 has container width & height set by Layout */
        _width: auto !important;
        _height: auto !important;
    }

    .ui-layout-resizer, .ui-layout-toggler {
        display: block !important;
    }

    /*
      *	Default pane print styles disables positioning, borders and backgrounds.
      *	You can modify these styles however it suit your needs.
      */
    .ui-layout-pane {
        border: none !important;
        background: transparent !important;
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/*----------------custom-----------------*/

.ui-layout-resizer-south {
    bottom: 0px !important;
}

.ui-layout-resizer-west, .ui-layout-resizer-east {
    width: 10px !important;

}

/*-----------
Buttons
------------*/

/*-----------Yellow-White Button--------*/
.button-content-YW {
    background: url(../../images/bt-content-R.png) right 0px no-repeat transparent;
    display: inline-block;
    padding-right: 15px;
    height: 33px;
    color: #645500;
}

.button-content-YW span {
    background: url(../../images/bt-content-L.png) left 0px no-repeat transparent;
    display: block;
    line-height: 31px;
    height: 33px;
    padding: 0px 0px 0px 33px;
}

.button-content-YW:hover {
    background-position: right -40px;
    color: #000000;
}

.button-content-YW:hover span {
    background-position: left -40px;
}

/*-----------Blue-White Button--------*/
.button-content-BW {
    background: url(../../images/bt-content-R.png) right -80px no-repeat transparent;
    display: inline-block;
    padding-right: 15px;
    height: 33px;
    color: #134859;
}

.button-content-BW span {
    background: url(../../images/bt-content-L.png) left -80px no-repeat transparent;
    display: block;
    line-height: 31px;
    height: 33px;
    padding-left: 33px;
}

.button-content-BW:hover {
    background-position: right -40px;
    color: #000000;
}

.button-content-BW:hover span {
    background-position: left -40px;
}

/*-----------Blue-White Button--------*/
.button-content-WB {
    background: url(../../images/bt-content-R.png) right -40px no-repeat transparent;
    display: inline-block;
    padding-right: 15px;
    height: 33px;
    color: #333333;
}

.button-content-WB span {
    background: url(../../images/bt-content-L.png) left -40px no-repeat transparent;
    display: block;
    line-height: 31px;
    height: 33px;
    padding: 0 0 0 33px;
}

.button-content-WB:hover {
    background-position: right -80px;
    color: #000000;
}

.button-content-WB:hover span {
    background-position: left -80px;
}

/*-----------Sidebar White-Orange Button--------*/

.button2-WY {
    background: url(../../images/button2-R.png) right 0px no-repeat transparent;
    display: inline-block;
    padding-right: 12px;
    height: 23px;
    color: #000000;
}

.button2-WY span {
    background: url(../../images/button2-L.png) left 0px no-repeat transparent;
    display: block;
    line-height: 19px;
    height: 23px;
    padding-left: 12px;
}

.button2-WY:hover {
    background-position: right -25px;
}

.button2-WY:hover span {
    background-position: left -25px;
}

/*---------INPUT - Text-----------*/

.content input[type = "text"] {
    border: 1px solid #9CD6E7;
    background-color1: #248FAA;
    background-color: #FFFFFF;
    border-radius: 3px;
    padding: 0 7px;
    height: 18px;
    box-shadow: rgba(36, 143, 170, 0.4) 0px 8px 25px inset;
    color: #333;
    line-height: 18px;
    position: relative;
    display: inline-block;
}

.content input[type = "text"]:before {
    content: "";
    width: 100%;
    height: 100%;
    box-shadow: rgba(11, 44, 51, 0.2) 0px 10px 15px;
    position: absolute;
}

/*-----------Footer---------------*/
.footer {
    position: absolute;
    bottom: 0px;
    height: 1px;
    width: 100%;
    background: url(../../images/footer-bg.png) 0px 0px repeat-x transparent;
}

.credits-cover {
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 1px;
    position: absolute;
}

.credits {
    margin: 0 auto;
    width: 400px;
    height: 35px;
    background: url(../../images/credits-bg.png);
}

.footer .copyright {
    float: left;
    width: 40%;
    padding-top: 7px;
    padding-left: 10px;
}

.footer .copyright p {
    color: #5C8EA6;
}

.footer .copyright a {
    color: #ffffff;
}

.footer .copyright a:hover {
    color: #33CCCC;
}

.footer .bottom-links {
    float: right;
    width: 40%;
    padding-top: 7px;
    padding-right: 10px;
}

.footer .bottom-links ul {
    float: right;
}

.footer .bottom-links ul li {
    float: left;
    padding-left: 30px;
}

.footer .bottom-links ul li a {
    color: #5C8EA6;
}

.footer .bottom-links ul li a:hover {
    color: #ffffff;
}